<template>
  <view class="search-data">
    <u-input
        placeholder="请输入搜索关键词"
        placeholder-style="{ opacity: 0.6,width: '600rpx',fontSize: '24rpx',fontFamily: 'PingFang',fontWeight: 500,color: '#888888',lineHeight: '40rpx', paddingRight:'43rpx', textIndent:'36rpx'}"
        :custom-style="{
              background: type==='a'?'#fff':'rgb(242, 242, 242)',
               height: '70rpx',
                borderRadius: '10px',
            }"
        border-color="#fff"
        height="41rpx"
        v-model="search"
        :clearable="false"
        @confirm="confirm"
        @blur="blur"
        @input="input"
    />
    <image
        class="search-icon"
        src="/static/img/search-icon.png"
        mode=""
        @click="confirm"
    ></image>
  </view>
</template>

<script>
export default {
  props: {
    //是否要清空
    isEmpty: {
      type: Boolean,
      default () {
        return false
      }
    },
    //样式类型
    type: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      search: '',//搜索内容
      placeholder: {},
      custom: {},
    }
  },
  mounted () {

  },
  watch: {},
  computed: {
    isType () {
      if (this.type === 'a') {
        this.placeholder = {
          opacity: 0.6,
          width: '600rpx',
          fontSize: '24rpx',
          fontFamily: 'PingFang',
          fontWeight: 500,
          color: '#888888',
          lineHeight: '40rpx',
          paddingRight: '43rpx',
          textIndent: '36rpx',
        }
        this.custom = {
          background: '#fff',
          height: '70rpx',
          borderRadius: '10px',
        }
      }
    }
  },
  methods: {
    //搜索
    confirm () {
      this.$emit('confirm', this.search)
    },
    input (e) {
      this.$emit('input', e)
    },
    blur (e) {
      this.$emit('blur', e)
    },
  }
}
</script>

<style lang="scss" scoped>
@import"@/style/global-search"
</style>
